<template>
  <div id="echartPie" :style="{height: height + 'px', width: width}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons')
import resize from './mixins/resize'
export default {
  name: 'Pie',
  mixins: [resize],
  inheritAttrs: true,
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: Number,
      default: 200
    },
    title: {
      type: String,
      default: '100%'
    },
    chartData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null,
      loading: false
    }
  },
  watch: {
    chartData: {
      handler(data) {
        if (data) {
          this.$nextTick(() => {
            this.initChart(data)
          })
        }
      },
      deep: true,
      immediate: true
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  mounted() {
      this.initChart(this.chartData)
  },
  methods: {
    initChart(val) {
      this.chart = echarts.init(this.$el, null)
      this.chart.setOption({
        title: {
          text: this.title,
          left: 'left',
          textStyle: {
            // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontSize: 15,
            fontWeight: 'bolder',
            color: '#333'
          },
          padding: 20
        },
        legend: {
          top: 'bottom',
          icon: 'circle',
          formatter: function(p) {
            var label = ''
            if (val.length > 0) {
              val.forEach((v) => {
                if (v.name === p) {
                  label = p + '：' + v.value + '个'
                }
              })
            }
            return label
          },
          selectorPosition: 'start',
          align: 'left',
          itemHeight: 8,
          itemWidth: 8,
          itemGap: 20
        },
        series: [
          {
            color: [
              '#507AFF',
              '#51D9A2',
              '#FFC371',
              '#364BEC',
              '#6DD400',
              '#F7B500',
              '#FA6400',
              '#D72552',
              '#B620E0'
            ],
            type: 'pie',
            radius: ['30%', '45%'],
            center: ['50%', '50%'],
            label: {
              normal: {
                show: false,
                color: '#fff'
              }
            },
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            data: val
          },
          {
            itemStyle: {
              normal: {
                color: '#F2F9F7'
              }
            },
            label: {
              normal: {
                show: false,
                color: '#fff'
              }
            },
            type: 'pie',
            silent: true, // 取消高亮
            radius: ['23%', '51%'],
            center: ['50%', '50%'],
            hoverAnimation: false, // 取消动画效果
            data: val,
            z: -1
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
</style>
